<!doctype html>
<html lang="zh-CN">

<head>
  <!-- 原始地址：//webapi.amap.com/ui/1.1/ui/geo/DistrictCluster/examples/events.html -->
  <base href="//webapi.amap.com/ui/1.1/ui/geo/DistrictCluster/examples/" />
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  <title>事件支持</title>
  <style>
      html,
      body,
      #container {
          width: 100%;
          height: 100%;
          margin: 0px;
      }

      #loadingTip {
          position: absolute;
          z-index: 9999;
          top: 0;
          left: 0;
          padding: 3px 10px;
          background: red;
          color: #fff;
          font-size: 14px;
      }

      #infoTip {
          position: absolute;
          width: 100%;
          background: #000;
          z-index: 9999;
          text-align: center;
          line-height: 150%;
          color: #fff;
      }
  </style>
</head>

<body>
<div id="infoTip">事件信息</div>
<div id="container"></div>
<script type="text/javascript" src='//webapi.amap.com/maps?v=2.0&key=您申请的key值'></script>
<!-- UI组件库 1.0 -->
<script src="//webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script>
<script type="text/javascript">
    //创建地图
    var map = new AMap.Map('container', {
        zoom: 4
    });

    function initPage(DistrictCluster, $) {

        var distCluster = new DistrictCluster({
            map: map, //所属的地图实例
            zIndex:11,
            getPosition: function(item) {

                if (!item) {
                    return null;
                }

                var parts = item.split(',');

                //返回经纬度
                return [parseFloat(parts[0]), parseFloat(parts[1])];
            },
            renderOptions: {
                featureEventSupport: true,
                clusterMarkerEventSupport: true,
                //标注信息Marker上需要监听的事件
                clusterMarkerEventNames: ['click', 'rightclick', 'mouseover', 'mouseout']
            }
        });

        window.distCluster = distCluster;

        distCluster.on('featureClick featureMouseover featureMouseout', function(e, feature) {

            $('#infoTip').html(e.type + ': ' + feature.properties.name);
        });

        distCluster.on('clusterMarkerClick clusterMarkerRightclick clusterMarkerMouseover clusterMarkerMouseout', function(e, record) {

            $('#infoTip').html(e.type + ': ' + record.feature.properties.name);
        });

        $('<div id="loadingTip">加载数据，请稍候...</div>').appendTo(document.body);
        $.get('https://a.amap.com/amap-ui/static/data/10w.txt', function(csv) {

            $('#loadingTip').remove();

            var data = csv.split('\n');

            //data=data.slice(0,10);


            distCluster.setData(data);
        });
    }

    //加载相关组件
    AMapUI.load(['ui/geo/DistrictCluster', 'lib/$'], function(DistrictCluster, $) {

        //启动页面
        initPage(DistrictCluster, $);
    });
</script>
</body>

</html>